<template>
    <div class="component">
        <!--面包屑导航-->
        <Breadcrumb :menulist="[`${componentType == 1 ? '项目' : '产品'}`, '表单', '部件项']" :showSystem="false" showBack></Breadcrumb>

        <!--table-->
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="tabHeader" style="justify-content: flex-end">
                <p class="tit" style="margin-right: auto;">部件项</p>
                <el-button type="primary" icon="el-icon-plus" @click="openAdd">添加部件项</el-button>
            </div>

            <el-table stripe :data="list.list" current-row-key="formPartId" style="width: 100%">
                <!--<el-table-column label="部件项ID" prop="fpFieldId"></el-table-column>-->
                <el-table-column label="部件项编码" prop="fieldCode"></el-table-column>
                <el-table-column label="部件项名" prop="fieldName"></el-table-column>
                <el-table-column label="关联模型字段" prop="attributeName"></el-table-column>
                <el-table-column label="所属部件" prop="formPartName"></el-table-column>
                <el-table-column label="参照表单" prop="lookupFormName"></el-table-column>
                <el-table-column label="参照项" prop="lookupField"></el-table-column>
                <el-table-column label="参照返回值" prop="returnField"></el-table-column>
                <el-table-column label="是否可空" prop="isNull" :formatter="formatter"></el-table-column>
                <el-table-column label="是否只读" prop="isReadOnly" :formatter="formatter"></el-table-column>
                <el-table-column label="是否禁用" prop="isDisable" :formatter="formatter"></el-table-column>
                <el-table-column label="缺省值" prop="defaultValue" :formatter="formatter"></el-table-column>
                <el-table-column label="是否查询条件" prop="isQuery" :formatter="formatter"></el-table-column>
                <el-table-column label="是否范围查询" prop="isRangeQuery" :formatter="formatter"></el-table-column>
                <el-table-column label="是否隐藏" prop="isHide" :formatter="formatter"></el-table-column>
                <el-table-column label="是否扩展" prop="isExtend" :formatter="formatter"></el-table-column>
                <el-table-column label="是否导出" prop="isExport" :formatter="formatter"></el-table-column>
                <el-table-column label="是否高级查询" prop="isSeniorQuery" :formatter="formatter"></el-table-column>
                <el-table-column label="是否操作符号可修改" prop="IsOpChange" :formatter="formatter"></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="openEdit(scope.row)">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @onConfirm="del(scope.row.fpFieldId)" style="margin-left: 10px;">
                            <el-button slot="reference" size="mini" type="danger">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="slot, total, prev, pager, next, jumper"
                    :total="list.total"
                    :current-page.sync="currentPage"
                    :page-size="rows"
                    @current-change="changePage"
            >
                <el-button v-if="list.list.length>0" icon="el-icon-refresh" type="primary" style="margin-right: 10px; background: #409EFF; color:#fff" @click="getList"></el-button>
            </el-pagination>
        </el-card>

        <!--添加表单-->
        <el-drawer
                title="添加Form"
                :show-close="false"
                :with-header="false"
                :before-close="cancelForm"
                :visible.sync="showAdd"
                direction="rtl"
                ref="drawer"
                :wrapperClosable="false"
                :destroy-on-close="true"
        >
            <div class="drawerTitle">{{type === 1 ? '新增部件项' : type === 2 ? '编辑部件项' : '删除部件项'}}</div>
            <div class="add-drawer">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <el-form-item :label-width="formLabelWidth" label="关联模型字段" prop="attributeId">
                        <el-select v-model="form.attributeId" @change="changeAttribute" style="width: 100%;" placeholder="请选择" :disabled="type === 2 || type === 3">
                            <el-option v-for="item in modelsList" :key="item.attributeId" :label="item.attributeName" :value="item.attributeId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="部件项编码">
                        <el-input v-model="form.fieldCode" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="部件项名称">
                        <el-input v-model="form.fieldName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="编辑器类型" prop="editorType">
                        <el-select v-model="form.editorType" style="width: 100%;" placeholder="请选择" :disabled="type === 3">
                            <el-option label="Text" value="0"></el-option>
                            <el-option label="Combo" value="1"></el-option>
                            <el-option label="CheckBox" value="2"></el-option>
                            <el-option label="RadioBox" value="3"></el-option>
                            <el-option label="Date" value="4"></el-option>
                            <el-option label="DateTime" value="5"></el-option>
                            <el-option label="Lookup" value="6"></el-option>
                            <el-option label="Image" value="7"></el-option>
                            <el-option label="TextArea" value="8"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="缺省值" v-if="type !== 2">
                        <el-input v-model="form.defaultValue" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="操作符">
                        <el-input v-model="form.operator" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="参照表单">
                        <el-select v-model="form.lookupFormId" style="width: 100%;" placeholder="请选择"
                                   :disabled="type === 3">
                            <el-option v-for="item in formList" :key="item.formId" :label="item.formName" :value="item.formId"></el-option>
                        </el-select>
                        <el-button type="text" size="mini" icon="el-icon-thumb" @click="openDialog">选择表单</el-button>
                        <el-button type="text" size="mini" icon="el-icon-delete" @click="clearForm">表单清除</el-button>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="参照项">
                        <el-select v-model="form.lookupField" style="width: 100%;" placeholder="请选择">
                            <el-option label="" value=""></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="参照返回值">
                        <el-select v-model="form.returnField" style="width: 100%;" placeholder="请选择">
                            <el-option label="" value=""></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属部件">
                        <el-input v-model="form.formPartName" disabled></el-input>
                    </el-form-item>
                    <!--<el-form-item :label-width="formLabelWidth" label="关联模型">
                        <el-input v-model="form.modelName" disabled></el-input>
                    </el-form-item>-->
                    <el-form-item :label-width="formLabelWidth" label="所属表单">
                        <el-input v-model="form.formName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属组件">
                        <el-input v-model="form.componentName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属模块">
                        <el-input v-model="form.moduleName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属项目" v-if="componentType==1">
                        <el-input v-model="form.solutionName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="所属产品">
                        <el-input v-model="form.topSolutionName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否查询条件">
                        <el-switch v-model="form.isQuery"></el-switch>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否范围查询">
                        <el-switch v-model="form.isRangeQuery"></el-switch>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否隐藏">
                        <el-switch v-model="form.isHide"></el-switch>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否扩展">
                        <el-switch v-model="form.isExtend"></el-switch>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否导出">
                        <el-switch v-model="form.isExport"></el-switch>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否高级查询">
                        <el-switch v-model="form.isSeniorQuery"></el-switch>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否只读">
                        <el-switch v-model="form.isReadOnly"></el-switch>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否禁用">
                        <el-switch v-model="form.isDisable"></el-switch>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="是否可空">
                        <el-switch v-model="form.isNull"></el-switch>
                    </el-form-item>
                    <el-form-item label-width="150" label="是否操作符号可修改">
                        <el-switch v-model="form.IsOpChange"></el-switch>
                    </el-form-item>
                </el-form>

                <div class="add-drawer_foot">
                    <el-button @click="cancelForm()">取 消</el-button>
                    <el-button plain icon="el-icon-delete" @click="reset()" v-if="type === 1">清除</el-button>
                    <el-button type="primary" @click="ok('ruleForm')" :loading="addLoading">{{ addLoading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>

        <!--选择表单弹窗-->
        <el-dialog title="选择表单" :visible.sync="dialogVisible" :close-on-click-modal="false" :fullscreen="true">
            <el-form :inline="true" :model="dialogForm">
                <el-form-item label="表单编码" :label-width="dialogFormLabelWidth">
                    <el-input v-model="dialogForm.formCode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="表单名称" :label-width="dialogFormLabelWidth">
                    <el-input v-model="dialogForm.formName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属模块" :label-width="dialogFormLabelWidth">
                    <el-select v-model="dialogForm.moduleId" placeholder="选择所属模块" clearable @change="changeModule">
                        <el-option v-for="item in modulesList" :key="item.moduleId" :label="item.moduleName" :value="item.moduleId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属组件" :label-width="dialogFormLabelWidth">
                    <el-select v-model="dialogForm.componentId" placeholder="选择所属组件" clearable :disabled="!dialogForm.moduleId">
                        <el-option v-for="item in componentsList" :key="item.componentId" :label="item.componentName" :value="item.componentId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryForm">查询</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="selectAndBack">选择并返回</el-button>
            </div>

            <el-table :data="gridData.list" highlight-current-row @current-change="selectRow">
                <el-table-column property="formCode" label="表单编码"></el-table-column>
                <el-table-column property="formName" label="表单名称"></el-table-column>
                <el-table-column property="url" label="表单地址"></el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :total="gridData.total"
                    :current-page.sync="page"
                    :page-size="size"
                    @current-change="changeDialogPage"
            >
            </el-pagination>
        </el-dialog>
    </div>
</template>

<script>
    import Breadcrumb from "@/components/Breadcrumb.vue";
    import {request, url} from "@/api/request";

    export default {
        name: "ComponentPartField",
        components: {
            Breadcrumb
        },
        data() {
            return {
                formId:'',
                componentID:'',
                list:{
                    list:[],
                },
                currentPage:1,
                rows:10,
                modelsList:[],//模型列表
                FormDefault:{},

                addLoading:false,
                showAdd:false,
                formLabelWidth: '110px',
                type:1,//1新增 2编辑 3删除
                form:{
                    isQuery:false,
                    isRangeQuery:false,
                    isHide:false,
                    isExtend:false,
                    isExport:true,
                    isSeniorQuery:false,
                    isReadOnly:false,
                    isDisable:true,
                    isNull:true,
                    IsOpChange:false,
                },
                rules:{
                    attributeId: [
                        { required: true, message: '必选', trigger: 'change' },//change
                    ],
                    fieldName: [
                        { required: true, message: '必填', trigger: 'change' },
                    ],
                    editorType: [
                        { required: true, message: '必选', trigger: 'change' },
                    ],
                },

                dialogVisible: false,
                dialogForm:{
                    formCode:'',
                    formName:'',
                    componentId:'',
                    moduleId:'',
                },
                dialogFormLabelWidth: '80px',
                page:0,
                size:10,
                gridData: {
                    list:[],
                },
                currentRow:null,
                formList:[],
                modulesList:[],
                componentsList:[],
            };
        },
        props: {
            componentType: {
                type: Number,
                default: 1,//1组件，2产品
            },
        },
        created() {

        },
        mounted() {
            let obj = this.getLocationParams(location.href.split('?')[1])
            obj.formPartId && (this.formPartId = obj.formPartId);
            this.getList();
        },
        methods: {
            getList(){
                request(`${url.getPartFieldList}/${this.formPartId}`,{
                    // loading:1,
                    data:{
                        currentPage:this.currentPage,
                        rows:this.rows,
                    }
                },res=>{
                    this.list = res.data;
                })
            },
            formatter(row, column, cellValue, index){
                return cellValue ? '是' : '否';
            },
            changePage(e){
                this.currentPage = e;
                this.getList();
            },
            //打开添加表单
            openAdd(){
                this.type = 1;
                this.showAdd = true;
                this.reset();
                //请求关联主模型和所属组件等
                this.getSelectList();
                this.getDefault();
            },
            //选择关联模型的视乎填充2个字段
            changeAttribute(e){
                this.modelsList.find(v=>{
                    if (v.attributeId === e) {
                        this.form.fieldCode = v.attributeCode;
                        this.form.fieldName = v.attributeName;
                        return true;
                    }
                })
            },
            openDel(row){
                //
            },
            openEdit(row){
                this.type = 2;
                this.showAdd = true;
                this.reset();
                let transBoolean = {
                    isQuery:!!row.isQuery,
                    isRangeQuery:!!row.isRangeQuery,
                    isHide:!!row.isHide,
                    isExtend:!!row.isExtend,
                    isExport:!!row.isExport,
                    isSeniorQuery:!!row.isSeniorQuery,
                    isReadOnly:!!row.isReadOnly,
                    isDisable:!!row.isDisable,
                    isNull:!!row.isNull,
                    IsOpChange:!!row.IsOpChange,
                    editorType:row.editorType.code+'',
                }
                // row = this.replaceAllNumber(row);

                this.form = {
                    ...row,
                    ...transBoolean,
                }
                this.modelsList = [{
                    attributeId:row.attributeId,
                    attributeName:row.attributeName,
                }]
                this.getDefault();
            },
            ok(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addLoading = true;
                        if (this.type === 1) {
                            this.add();
                        }
                        else if(this.type === 2){
                            this.edit();
                        }
                        else if(this.type === 3){
                            this.del();
                        }
                    }
                    else {
                        this.$message({
                            message:'有未完成的必填项！',
                            type:'warning',
                        })
                        return false;
                    }
                });
            },
            getSelectList(){
                request(`${url.getPartFieldModelList}/${this.formPartId}`,{},res=>{
                    this.modelsList = res.data;
                })
            },
            getDefault(){
                request(`${url.getPartFieldDefault}/${this.formPartId}`,{},res=>{
                    this.form = {
                        ...this.form,
                        ...res.data,
                    };
                })
            },
            cancelForm() {
                this.addLoading = false;
                this.showAdd = false;
                this.reset();
            },
            add(){
                this.form = this.replaceAllBoolean(this.form);
                request(`${url.savePartField}`,{
                    method:'POST',
                    data:{
                        ...this.form,
                        formPartId:this.formPartId,
                    },
                },res=>{
                    this.addLoading = false;
                    this.$refs.drawer.closeDrawer();
                    this.reset();
                    this.$notify.success(res.message);
                    this.getList();
                },()=>{
                    this.addLoading = false;
                })
            },
            edit(){
                this.form = this.replaceAllBoolean(this.form);
                request(`${url.savePartField}/${this.form.fpFieldId}`,{
                    method:'PUT',
                    data:{
                        ...this.form,
                        formPartId:this.formPartId,
                    },
                },res=>{
                    this.addLoading = false;
                    this.$refs.drawer.closeDrawer();
                    this.reset();
                    this.$notify.success(res.message);
                    this.getList();
                },()=>{
                    this.addLoading = false;
                })
            },
            del(fpFieldId){
                request(`${url.savePartField}/${fpFieldId}`,{
                    method:'delete',
                },res=>{
                    // this.addLoading = false;
                    // this.$refs.drawer.closeDrawer();
                    this.reset();
                    this.$notify.success(res.message);
                    this.getList();
                },()=>{
                    this.addLoading = false;
                })
            },

            openDialog(){
                this.dialogVisible = true;
                this.queryForm();
                this.getModules();
            },
            changeDialogPage(e) {
                this.page = e;
                this.queryForm();

            },
            queryForm(){
                request(`${url.formsChoice}/${this.$store.state.solution_global.solutionId}`, {
                    // loading:1,
                    data: {
                        currentPage: this.page,
                        rows: this.size,
                        formCode:this.dialogForm.formCode,
                        formName:this.dialogForm.formName,
                        componentId:this.dialogForm.componentId,
                        moduleId:this.dialogForm.moduleId,
                    }
                }, res => {
                    this.gridData = res.data;
                })
            },
            getModules(){
                request(`${url.modulesSelect}/${this.$store.state.solution_global.solutionId}`, {
                    data:{
                        currentPage:0,
                        rows:10,//这里的分页参数没有用，只是为了不报错
                    },
                }, res => {
                    this.modulesList = res.data;
                })
            },
            getComponents(){
                request(`${url.componentsSelect}/${this.dialogForm.moduleId}`, {
                    data:{
                        solutionId:this.$store.state.solution_global.solutionId,
                    },
                }, res => {
                    this.componentsList = res.data;
                })
            },
            changeModule(){
                if(!this.dialogForm.moduleId) return;
                this.getComponents();
            },
            selectRow(row, oldRow){
                this.currentRow = row;
            },
            selectAndBack(){
                console.log(this.currentRow);
                if(!this.currentRow){
                    this.$message({
                        message:'请先选择一项表单！',
                        type:'warning',
                    })
                    return;
                }
                this.formList = [this.currentRow];
                this.form.lookupFormId = this.currentRow.formId;
                this.dialogVisible = false;
            },
            clearForm(){
                this.formList = [];
                this.form.openFormId = '';
            },

            reset() {
                this.form = {
                    ...this.form,
                    isToolBar: true,
                    attributeId:'',
                    fieldCode:'',
                    fieldName:'',
                    editorType:'',
                    defaultValue:'',
                    operator:'',
                    lookupFormId:'',
                    lookupField:'',
                    returnField:'',
                };
            },
            toPartField(row){
                console.log(row);
            },
            toPartBtn(row){
                console.log(row);
            },
        }
    };
</script>

<style scoped>
    .add-drawer{
        padding:20px 20px 20px 15px;
    }
    .add-drawer_foot{
        text-align: center;
    }
    .drawerTitle {
        line-height: 70px;
        font-size: 20px;
        margin-left: 30px;
    }

    .tree {
        margin-left: 30px;

    }
    .tabHeader{
        display: flex;
        align-items: center;
    }
    .tit{
        font-weight: bold;
        font-size: 20px;
        display: inline;
        margin-right: 15px;
    }
    .box-card{
        margin-bottom: 15px;
    }

</style>
